<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鲍鱼年龄预测系统 - 大屏展示</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        :root {
            --bg-color: #0a1a35;
            --card-bg: #132347;
            --text-color: #ffffff;
            --highlight-color: #00ff9d;
            --border-color: #1a3a6a;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: 'Arial', sans-serif;
            overflow-x: hidden;
        }

        .navbar {
            background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
        }

        .nav-link {
            color: var(--text-color) !important;
        }

        .nav-link.active {
            color: var(--highlight-color) !important;
            font-weight: bold;
        }

        .dashboard-card {
            background-color: var(--card-bg);
            border-radius: 10px;
            border: 1px solid var(--border-color);
            box-shadow: 0 0 15px rgba(0, 255, 157, 0.1);
            padding: 20px;
            margin-bottom: 20px;
            height: 100%;
        }

        .card-title {
            color: var(--highlight-color);
            font-size: 1.2rem;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 10px;
        }

        .model-accuracy {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--highlight-color);
            text-align: center;
            margin: 15px 0;
        }

        .model-name {
            font-size: 1.1rem;
            text-align: center;
            margin-bottom: 10px;
        }

        .log-table {
            width: 100%;
            color: var(--text-color);
        }

        .log-table th {
            background-color: var(--border-color);
            color: var(--highlight-color);
            padding: 10px;
        }

        .log-table td {
            padding: 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .chart-container {
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">鲍鱼年龄预测系统</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="nav-link" href="/">主页</a></li>
                    <li class="nav-item"><a class="nav-link" href="/search">查询</a></li>
                    <li class="nav-item"><a class="nav-link" href="/train">训练</a></li>
                    <li class="nav-item"><a class="nav-link active" href="/screen">大屏</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-4">
        <div class="row">
            <!-- 模型准确率 -->
            <div class="col-md-6">
                <div class="dashboard-card">
                    <h3 class="card-title">模型准确率</h3>
                    <div class="row">
                        <div class="col-md-4 col-sm-6">
                            <div class="model-name">线性回归 (LR)</div>
                            <div class="model-accuracy" id="lr-accuracy">0%</div>
                        </div>
                        <div class="col-md-4 col-sm-6">
                            <div class="model-name">决策树回归 (DT-R)</div>
                            <div class="model-accuracy" id="dt-accuracy">0%</div>
                        </div>
                        <div class="col-md-4 col-sm-6">
                            <div class="model-name">随机森林 (RF-R)</div>
                            <div class="model-accuracy" id="rf-accuracy">0%</div>
                        </div>
                    </div>
                    <div class="chart-container" id="accuracy-chart"></div>
                </div>
            </div>

            <!-- 模型使用统计 -->
            <div class="col-md-6">
                <div class="dashboard-card">
                    <h3 class="card-title">模型使用统计</h3>
                    <div class="chart-container" id="model-usage-chart"></div>
                </div>
            </div>

            <!-- 预测日志 -->
            <div class="col-md-12">
                <div class="dashboard-card">
                    <h3 class="card-title">最近预测记录</h3>
                    <div class="table-responsive">
                        <table class="log-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>预测年龄</th>
                                    <th>使用模型</th>
                                    <th>预测时间</th>
                                </tr>
                            </thead>
                            <tbody id="prediction-log">
                                <!-- 日志将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化图表
        function initCharts() {
            // 1. 准确率图表
            const accuracyChart = echarts.init(document.getElementById('accuracy-chart'));
            const modelUsageChart = echarts.init(document.getElementById('model-usage-chart'));

            // 从后端获取数据
            fetch('/screen/data')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // 更新模型准确率
                        document.getElementById('lr-accuracy').textContent = data.modelAccuracies.LR.toFixed(2) + '%';
                        document.getElementById('dt-accuracy').textContent = data.modelAccuracies['DT-R'].toFixed(2) + '%';
                        document.getElementById('rf-accuracy').textContent = data.modelAccuracies['RF-R'].toFixed(2) + '%';

                        // 更新预测日志
                        const logTable = document.getElementById('prediction-log');
                        logTable.innerHTML = data.predictionLogs.map(log => `
                            <tr>
                                <td>${log.id}</td>
                                <td>${log.predicted_rings}</td>
                                <td>${log.prediction_model}</td>
                                <td>${log.prediction_time}</td>
                            </tr>
                        `).join('');

                        // 设置准确率图表选项
                        accuracyChart.setOption({
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: { type: 'shadow' },
                                formatter: '{b}<br/>准确率: {c}%'
                            },
                            xAxis: {
                                type: 'category',
                                data: ['线性回归', '决策树回归', '随机森林'],
                                axisLine: { lineStyle: { color: '#1a3a6a' } },
                                axisLabel: { color: '#ffffff' }
                            },
                            yAxis: {
                                type: 'value',
                                min: 0,
                                max: 100,
                                axisLine: { show: false },
                                axisLabel: {
                                    color: '#ffffff',
                                    formatter: '{value}%'
                                },
                                splitLine: { lineStyle: { color: '#1a3a6a' } }
                            },
                            series: [{
                                data: [
                                    data.modelAccuracies.LR,
                                    data.modelAccuracies['DT-R'],
                                    data.modelAccuracies['RF-R']
                                ],
                                type: 'bar',
                                itemStyle: {
                                    color: function(params) {
                                        const colorList = ['#00ff9d', '#00e0ff', '#ffaa00'];
                                        return colorList[params.dataIndex];
                                    }
                                },
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{c}%',
                                    color: '#ffffff'
                                }
                            }]
                        });

                        // 设置模型使用统计图表选项
                        modelUsageChart.setOption({
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b}: {c} ({d}%)'
                            },
                            legend: {
                                orient: 'vertical',
                                right: 10,
                                top: 'center',
                                textStyle: { color: '#ffffff' }
                            },
                            series: [{
                                name: '模型使用统计',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#0a1a35',
                                    borderWidth: 2,
                                    color: function(params) {
                                        const colorList = ['#00ff9d', '#00e0ff', '#ffaa00'];
                                        return colorList[params.dataIndex];
                                    }
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '18',
                                        fontWeight: 'bold',
                                        color: '#ffffff'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: data.modelStats
                            }]
                        });
                    }
                });

            // 窗口大小改变时重新调整图表大小
            window.addEventListener('resize', function() {
                accuracyChart.resize();
                modelUsageChart.resize();
            });
        }

        // 页面加载完成后初始化图表
        document.addEventListener('DOMContentLoaded', initCharts);

        // 每30秒刷新一次数据
        setInterval(initCharts, 30000);
    </script>
</body>
</html>